<template>
  <el-dialog v-model="showPopup" :title="props.popupType" :before-close="handleClose">
    <div class="content-role-popup">
      <div class="role-popup-item">
        <span>账户:</span>
        <el-input :disabled="props.popupType === '详情'||props.popupType === '编辑'" v-model="form.account" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="role-popup-item">
        <span>密码:</span>
        <el-input :disabled="props.popupType === '详情'" minlength="8" type="password" v-model="form.password" style="width: 240px" placeholder="请输入" />
      </div>
      <div class="role-popup-item">
        <span>允许登录:</span>
        <el-radio-group v-model="form.state" :disabled="props.popupType === '详情'">
          <el-radio value="0">是</el-radio>
          <el-radio value="1">否</el-radio>
        </el-radio-group>
      </div>
      <div class="role-popup-item">
        <span>角色:</span>
        <el-radio-group v-model="form.roleId" @change="radioChange" :disabled="props.popupType === '详情'">
          <el-radio :value="item.id" v-for="item in roleList.data" :key="item.id">{{ item.roleName }}</el-radio>
        </el-radio-group>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref,reactive,watch } from "vue";
import {_addUserInfo, _getRoleList, _getTemplateList, _getUserDetail, _updateUserInfo} from "../../http/api.js";
import {ElLoading, ElMessage} from "element-plus";

const props = defineProps({
  showPopup:Boolean,
  popupType: String,
  userId: String
})
watch(() => props.showPopup, (val) => {
  showPopup.value = val;
})
watch(() => props.userId, (val) => {
  if(val) {
    getUserDetail(val)
  }
})
const $emit = defineEmits(['showPopupEmit'])
const showPopup = ref(false); // 弹框显示
const form = ref({
  account:'',
  state:'',
  roleName:'',
  roleId:'',
  password:'',
  // userCert:[],
  id:''
})
const roleList = reactive({
  data:[]
})

// 关闭弹框
const handleClose = () => {
  form.value = {
    account:'',
    state:'',
    roleName:'',
    roleId:'',
    password:'',
    id:''
  }
  showPopup.value = false;
  $emit('showPopupEmit',false)
}
// 获取角色列表
const getRoleList = () => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  _getRoleList()
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          roleList.data = res.data.data;
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
      })
}
getRoleList();

// 根据id 获取用户详情
const getUserDetail = (id) => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  _getUserDetail(id)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let item = res.data.data;
          form.value.account = item.account;
          form.value.state = item.state;
          form.value.roleName = item.roleName||'';
          form.value.roleId = item.roleId||'';
          form.value.id = item.id||'';
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
      })
}
// 单选选择
const radioChange = (val) => {
  console.log(val);
  let item = roleList.data.filter(v => v.id === val);
  form.value.roleName = item[0].roleName;
}
// 保存信息
const save = () => {
  if(!form.value.state) return ElMessage({type: 'warning', message: '请选择账号是否允许登录'});
  if(!form.value.roleId) return ElMessage({type: 'warning', message: '请选择账号角色'});
  // if(form.value.account.length < 8) return ElMessage({type: 'warning', message: '密码长度需8-20位'});
  if(form.value.password && form.value.password.length < 8) return ElMessage({type: 'warning', message: '密码长度需8-20位'});

  if(props.userId) {
    updateUserInfo()
  }else {
    if(form.value.password.length < 8) return ElMessage({type: 'warning', message: '密码长度需8-20位'});
    addUserInfo()
  }
}

// 添加用户信息
const addUserInfo = () => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  let params = { ... form.value }
  delete params.id;
  _addUserInfo(params)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          ElMessage({type: 'success', message: '新增成功'})
          handleClose()
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage({type: 'error', message: err.data.msg||'网络异常请重试'})
      })
}
//更新用户信息
const updateUserInfo = () => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'});
  let params = { ... form.value }
  // delete params.password;
  _updateUserInfo(params)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          ElMessage({type: 'success', message: '更新成功'})
          handleClose()
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage({type: 'error', message: '网络异常请重试'})
      })
}

</script>

<style scoped lang="scss">
.content-role-popup{
  padding: 10px;
  .role-popup-item{
    margin-bottom: 10px;
    span{
      display: inline-block;
      width: 100px;
      text-align: left;
    }
  }
}
</style>